<template>
    <div class="alarmList" @mouseleave="leave">
        <div style="padding: 20px;" v-if="loading">
            <a-skeleton avatar :paragraph="{ rows: 1 }" />
            <a-skeleton avatar :paragraph="{ rows: 1 }" />
            <a-skeleton avatar :paragraph="{ rows: 1 }" />
        </div>
        <div class="home-form-emergency-item animated fadeInUp" v-for="(item, key) in data" :key="key">
            <template v-if="!loading">
                <kIcon :type="alarmType[item.type].icon" :style="{fontSize: '27px', 'marginTop': '5px'}"/>
                <div>
                    <p>
                        {{item.time}} {{alarmType[item.type].label}}报警({{item.info}})
                    </p>
                    <p>
                        {{item.name}}（{{item.institutions}}）当前位置：{{item.site}}
                    </p>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import kIcon from '@/utils/k-icon';
    import {alarmType} from '@/config/configuration';

    export default {
        name: "alarmList",
        components: {kIcon},
        props: {
            data: {
                type: Array
            },
            loading: {
                type: Boolean
            }
        },
        data() {
            return {
                alarmType
            }
        },
        watch: {
          data() {
              this.$nextTick(() => {
                  $('.alarmList').animate({scrollTop: `+=${$(".home-form-emergency-item").height() + 34}` }, 1000)
              })
          }
        },
        mounted() {
            // this.$nextTick(() => {
            //     $('.alarmList').niceScroll({
            //         'cursorcolor':'rgba(204,204,204,0.44)',
            //         autohidemode: 'leave'
            //     });
            // })
            setTimeout(() => {
                this.startRolling();
            }, 2000)
        },
        methods: {
            startRolling() {
                $('.alarmList').animate({scrollTop: $(".alarmList").prop("scrollHeight") }, 3000)
            },
            leave() {}
        },
        destroyed() {
        }
    }
</script>

<style scoped lang="less">
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateY(80px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.6s ease;
    }

    /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
    .v-move {
        transition: all 0.6s ease;
    }

    .v-leave-active {
        position: absolute;
    }

    .alarmList {
        height: 100%;
        overflow: auto;
    }

    .home-form-emergency-item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 14px;
        user-select: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: all .3s linear;
        animation-delay: .3s !important;
        div {
            padding-left: 10px;
        }

        p {
            margin: 0;
            padding: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .alarmList::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    .alarmList::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
    }
    .alarmList::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 10px;
    }
    .alarmList:hover{
        &::-webkit-scrollbar-thumb {
            background-color: rgba(204,204,204,0.44);
        }
    }
</style>
